<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-25 11:59:21
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-21 11:14:16
 * @FilePath: /vue3-uniapp/src/components/ui/CustomImage/CustomImage.vue
-->
<script lang="ts" setup>
import { readImageAsync } from '@/api/app';

const props = withDefaults(
    defineProps<{
        sourceId: number;
        width: string;
        height: string;
        shape?: 'circle' | 'square';
    }>(),
    {
        shape: 'square'
    }
);

const emits = defineEmits<{
    (event: 'success', value: { src: string; id: number }): void;
}>();

const { sourceId, width, height, shape } = toRefs(props);

const src = ref('');

watch(
    () => sourceId.value,
    (newVal) => {
        if (newVal) {
            readImageAsync(newVal).then((res) => {
                src.value = res!;
                emits('success', {
                    src: src.value,
                    id: newVal
                });
            });
        }
    },
    {
        immediate: true
    }
);
</script>

<template>
    <view class="custom-image-container" :width="width" :height="height">
        <image
            v-show="src"
            :src="src"
            :style="{
                borderRadius: shape === 'circle' ? '50%' : '',
                width: height || '100%',
                height: width || '100%'
            }"
        />
    </view>
</template>

<style lang="scss" scoped>
.custom-image-container {
    background: transparent;
}
</style>
